<!--suppress ALL -->
<template>
<div class="page maintain-page workApply-page" data-page="workApply" style="z-index: 2">
  <div class="link-page-nav">
      <a href="#" class="link" @click="$root.backToTab()">
          <i class="iconfont icon-zuo"></i>
      </a>
  </div>
  <div class="link-page-top">
   	  <div class="link-page-title">作业申请</div>
      <a class="link popover-open" data-popover="#dector_menu">
        	<i class="iconfont icon-APPicon_shaixuan1
" id="active" style="font-size:24px"></i>
 	  </a>
  </div>
  <div  style="width: 100%;height: 30px;position: absolute;z-index: 3;background-color: #fff;">
      <div class="checkApply-tab">
          <a href="#" class="workApply checkApply-link active" @click="selectCurrentType(1)">我申请的</a>
          <a href="#" class="workApply checkApply-link" @click="selectCurrentType(2)">我作业的</a>
          <a href="#" class="workApply checkApply-link" @click="selectCurrentType(3)">我审批的</a>
      </div> 
  </div>
  <div class="page-content infinite-scroll-content ptr-content" style="margin-top: 20px; padding-bottom: 180px;"
        data-infinite-distance="50"  
        @infinite="loadMore" 
        @ptr:refresh="refreshMaintainList">
        <div class="ptr-preloader">
            <div class="preloader color-multi"></div>
            <div class="ptr-arrow"></div>
        </div>
        <div class="list media-list">
            <ul id="workApply_dataList" style="padding-top: 15px;"></ul>
           <div id="dataList_preloader" class="preloader infinite-scroll-preloader"></div>
        </div>
  </div>
  <div class="popover select-option-list" id="dector_menu" style="width: 160px;top: 60px;">
      <div class="popover-angle"></div>
      <div class="popover-inner">
          <div class="list">
            <ul>
              <li><a href="" class="list-button item-link popover-close" id="select_org">选择单位</a></li>
              <li><a href="" class="list-button item-link popover-close" id="workApply_type">选择作业类型</a></li>
              <li><a href="" class="list-button item-link popover-close removeScreen select-active" @click="removeScreen" >清&nbsp&nbsp&nbsp&nbsp&nbsp空</a></li>
            </ul>
          </div>
      </div>
  </div>
  <div class="more-task-btn" @click="workApplyBtn">
  	<div class="approveCreateSize">作业申请</div>
  </div>
</div>
</template>

<script>
return {
    data: function() {
        return {
          pageSize: 25,//分页参数(每页显示条数)
          pageIndex: 0,//分页参数
          orgIds : 0,//联网单位编码，支持多单位，逗号拼接
          status : 1,// 1：我申请  2： 我作业 3：我审批
          workAccount: "",//责任人账号
          workAccount:"",//作业人账号
          approvalAccounts:"",//审批人账号
          selectOptionOrg : "",
          currentOrgId : "",
          taskIds:"", //选中的任务ID
          selectOptionIndex:'',
          allowInfinite: true,
          touBType:[],
          workApplyFilterType:-1,
          approvalStatus:1,
          
        }
    },
    methods: {
        backToRefresh: function(){
          let self = this;
        	self.reInit();
          self.getWorkApplyList();
        },
        //点击不同类型
        selectCurrentType:function(status){
          if(getClickEnabel()){
              let self = this;
              let $ = self.$$;
              self.status = status;
              //选择框变色
              $(".workApply.checkApply-link").removeClass('active').eq((status-1)).addClass('active');
              $(".checkApply-page .tab-link-highlight").css("left",((status-1)==0?1:(status-1)*33.3333)+"%");
              //展示列表数据
              self.reInit();
              self.getWorkApplyList();
          }
        },
        /*区分联网单位*/
        isMuilUnitUser:function(){
            var self = this;
            //单联网单位
            if (userInfor.isMuilUnitUser  == 0) {
               self.currentOrgId = userInfor.organizationIds;
               $("#select_org").hide();
            }else{//多联网单位
               if (single_Orgid == "") {
                 self.currentOrgId=userInfor.organizationIds;
               } else {
                 self.currentOrgId=single_Orgid;
               }
               jQuery("#select_org").show().click(function(e) {
                   loadSelectUnitFunc(function(data){
                       //筛选选中联网单位
                       if(self.selectOptionOrg != data.orgId){
                           self.selectOptionOrg = data.orgId;
                           self.currentOrgId=data.orgId;
                           jQuery("#select_org").html(data.orgName);
                           jQuery("#select_org").addClass('select-active');
                       } else {
                           self.selectOptionOrg = 0;
                           if (single_Orgid == "") {
                             self.currentOrgId=userInfor.organizationIds;
                           } else {
                             self.currentOrgId=single_Orgid;
                           }
                           jQuery("#select_org").html("选择单位");
                           jQuery("#select_org").removeClass('select-active');
                       }
                       self.pageIndex = 0;
                       self.reInit();
                       self.getWorkApplyList();
                   },self.selectOptionOrg);
               });
           }
        },
        //获取作业申请任务列表
        getWorkApplyList:function(){
            var self = this;
            //筛选按钮有值变色
            if(jQuery("#select_org")[0].innerText != "选择单位" || jQuery("#workApply_type")[0].innerText != "选择作业类型"){
                jQuery("#active").addClass("select-active");
            }else{
                jQuery("#active").removeClass("select-active");
            }
            var param = {
                    queryType: 1,//分页参数 0：不分页 1：分页
                    pageSize: self.pageSize,//分页参数(每页显示条数)
                    pageIndex:self.pageIndex,//分页参数
                    orgIds:self.currentOrgId,//self.currentOrgId  122 测试数据先写死  联网单位编码，支持多单位，逗号拼接  
                    status:-1,//审批状态,-1：所有，1：审批中 2：审批通过 3：审批不通过 4：已撤回
                    type:self.workApplyFilterType,
                  };
            if(self.status==1){
            	param.createAccount = userInfor.accountName;//责任人账号
            }else if(self.status==2){
            	param.workAccount = userInfor.accountName;//申请人账号
            }else if(self.status==3){
            	param.approvalAccounts = userInfor.accountName;//审批人账号
            }
            $("#workApply_dataList").empty();
            Dao.getWorkApplyRecords(param, function (data,total) {
                if (data && data.length > 0){
                  if (self.pageSize * self.pageIndex + data.length < total) { //有分页
                      $("#dataList_preloader").show();
                      self.allowInfinite = true;
                  } else {  //没分页
                      $("#dataList_preloader").hide();
                      self.allowInfinite = false;
                  }
                  for (var i=0;i<data.length;i++) {
                    var usersArr = data[i].workAccountName;//任务责任人名称
                    var workAccountNames= "无";
                    if(usersArr){
                    	var usersSize = usersArr.length;
                	    if(usersSize==1){
                	    	workAccountNames = usersArr[0]==""?"无":usersArr[0];
                	    }else if(usersSize==2){
                	    	workAccountNames = usersArr[0]+"、"+usersArr[1];
                	    }else if(usersSize>2){
                	    	workAccountNames = usersArr[0]+"、"+usersArr[1]+"、"+usersArr[2]+"等";
                	    }
                    }
                    
                    var approveStatus = data[i].status;
                    var currentApprovalAccount = data[i].currentApprovalAccount;//当前审批人账号（只有审批中状态才会有）
                    
                    // var btnText = "";
                    // if(approveStatus == 1 && userInfor.accountName==currentApprovalAccount){
                    //      btnText = `审批`;
                    // }else{
                    //   jQuery('.rightBtn_'+i).css({'background':'#fff'})
                    // }
                    
                    var status = "未完成";
                    var statusCSS = "";
                    if(approveStatus ==1){
                    	approveStatus="审批中";
                        statusCSS = "approvePass";
                    }else if(approveStatus ==2){
                    	approveStatus="审批通过 ";
                    	statusCSS = "approvePass";
                    }else if(approveStatus ==3){
                    	approveStatus="审批不通过";
                    	statusCSS = "approveNotPass";
                    }else if(approveStatus ==4){
                    	approveStatus="已撤回";
                    	statusCSS = "approveNotPass";
                    }
                    
   	                var beginTime = data[i].beginTime;
   	                if(beginTime){
   	               		  beginTime =moment(beginTime).format('YYYY/MM/DD HH:mm');
   	                }
                    var endTime = data[i].endTime;
                    if(endTime){
                        endTime =moment(endTime).format('YYYY/MM/DD HH:mm');
                    }
   	                
                    if(self.status==2){//我作业的
                      $("#workApply_dataList").append(`
                          <li style="overflow:hidden">
                            <a href="/workApplyDetail/`+data[i].id+`/0/" class="item-link item-content" data-view=".view-main">
                              <div class="item-inner">
                                <div class="title-status-complete">`+data[i].typeName+`</div>
                                <div class="item-title-row">`+data[i].workDesc+`</div>
                                <div class="item-subtitle decter-mesage"><div class="float-left">作业周期 </div><div class="float-left marginLeft">`+beginTime+`&nbsp;~ &nbsp`+endTime+`</div></div>
                                <div class="item-subtitle decter-mesage"><div class="float-left">业主单位</div><div class="float-left marginLeft">`+data[i].orgName+`</div></div>
                                <div class="item-subtitle decter-mesage"><div class="float-left">作&nbsp;&nbsp;业&nbsp;&nbsp;人</div><div class="float-left marginLeft">`+workAccountNames+`</div></div>
                              </div>
                            </a>
                            <div class="decter-stuts-con" style="padding-left: 15px;">
	                            <span class="left">
	                       			<span class="`+statusCSS+`">`+approveStatus+`</span>
	                    	 	</span>
                              
                            </div>
                            <div class="rightBtn_`+i+`" style="width:80px;text-align:center;color:#fff;background:#2471ca;border-radius:15px;margin:0 15px 10px 0;float:right" >
                                  <a href="/approveApply/`+data[i].approveId+`/" style="color:#fff;display: block;padding:5px 0;" data-view=".view-main"  >审批</a>
                              	</div>
                          </li>`);
                          if(data[i].status == 1 && userInfor.accountName==currentApprovalAccount){
                            jQuery('.rightBtn_'+i).show()
                          }else{
                            jQuery('.rightBtn_'+i).hide()
                          }
                        }else if(self.status==1){//我申请的
                        	 $("#workApply_dataList").append(`
                                     <li style="overflow:hidden">
                                       <a href="/workApplyDetail/`+data[i].id+`/0/" class="item-link item-content" data-view=".view-main">
                                         <div class="item-inner">
                                         <div class="title-status-complete">`+data[i].typeName+`</div>
                                           <div class="item-title-row">`+data[i].workDesc+`</div>
                                           <div class="item-subtitle decter-mesage"><div class="float-left">作业周期 </div><div class="float-left marginLeft">`+beginTime+`~`+endTime+`</div></div>
                                           <div class="item-subtitle decter-mesage"><div class="float-left">业主单位</div><div class="float-left marginLeft">`+data[i].orgName+`</div></div>
                                           <div class="item-subtitle decter-mesage"><div class="float-left">作&nbsp;&nbsp;业&nbsp;&nbsp;人</div><div class="float-left marginLeft">`+workAccountNames+`</div></div>
                                         </div>
                                       </a>
                                       <div class="decter-stuts-con" style="padding-left: 15px;">
                                       	 <span class="left">
                                       		<span class="`+statusCSS+`">`+approveStatus+`</span>
                                    	 </span>
                                    
                                       </div>
                                       <div class="rightBtn_`+i+`" style="width:80px;text-align:center;color:#fff;background:#2471ca;border-radius:15px;margin:0 15px 10px 0;float:right">
                                  <a href="/approveApply/`+data[i].approveId+`/" style="color:#fff;display: block;padding:5px 0;" data-view=".view-main" >审批</a>
                              	</div>
                                     </li>`);
                                     if(data[i].status == 1 && userInfor.accountName==currentApprovalAccount){
                            jQuery('.rightBtn_'+i).show()
                          }else{
                            jQuery('.rightBtn_'+i).hide()
                          }
                        }else if(self.status==3){//我审批的
                        	 if(approveStatus==2){
                        		 //审批通过
                        	 }
                        	 $("#workApply_dataList").append(`
                                     <li style="overflow:hidden">
                                       <a href="/workApplyDetail/`+data[i].id+`/0/" class="item-link item-content" data-view=".view-main">
                                         <div class="item-inner">
                                           <div class="title-status-complete">`+data[i].typeName+`</div>
                                           <div class="item-title-row">`+data[i].workDesc+`</div>
                                           <div class="item-subtitle decter-mesage"><div class="float-left">作业周期 </div><div class="float-left marginLeft">`+beginTime+`~`+endTime+`</div></div>
                                           <div class="item-subtitle decter-mesage"><div class="float-left">业主单位</div><div class="float-left marginLeft">`+data[i].orgName+`</div></div>
                                           <div class="item-subtitle decter-mesage"><div class="float-left">作&nbsp;&nbsp;业&nbsp;&nbsp;人</div><div class="float-left marginLeft">`+workAccountNames+`</div></div>
                                         </div>
                                       </a>
                                       <div class="decter-stuts-con" style="padding-left: 15px;">
                                       		<span class="left">
		   	                       				<span class="`+statusCSS+`">`+approveStatus+`</span>
		   	                    	 		</span>
	                                       
                                       </div>
                                       <div class="rightBtn_`+i+`" style="width:80px;text-align:center;color:#fff;background:#2471ca;border-radius:15px;margin:0 15px 10px 0;float:right">
                                  <a href="/approveApply/`+data[i].approveId+`/" style="color:#fff; display:block;padding:5px 0;" data-view=".view-main" >审批</a>
                              	</div>
                                     </li>`);
                                     if(data[i].status == 1 && userInfor.accountName==currentApprovalAccount){
                                      jQuery('.rightBtn_'+i).show()
                                    }else{
                                      jQuery('.rightBtn_'+i).hide()
                                    }
                          }
                  }
                }else{
                  self.allowInfinite = false;
                  $("#dataList_preloader").hide();
                  //暂无数据
                  if (self.pageIndex == 0) {
                      $("#workApply_dataList").append(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`);
                  }
                }
            });
        },
        //清空
        removeScreen:function(){
            var self = this;
            jQuery("#select_org").removeClass('select-active').html("选择单位");
            
            self.workApplyFilterType = -1;
            jQuery("#workApply_type").removeClass('select-active').html("选择作业类型");
            //jQuery("#maintainListTitle").html("保养");
            self.workAccount = "";
            self.selectOptionIndex = 0;
            self.pageIndex = 0;
 
            if (userInfor.isMuilUnitUser  == 0) {
              self.currentOrgId = userInfor.organizationIds;
            }else{
              //多联网单位
              if (single_Orgid == "") {
                self.currentOrgId=userInfor.organizationIds;
              } else {
                self.currentOrgId=single_Orgid;
              }
            }
            self.reInit();
            self.getWorkApplyList();
        },

        loadMore:function(){
          var self = this;
          if (!self.allowInfinite) return;
            self.allowInfinite = false;
          setTimeout(function () {
            self.pageIndex++;
            self.getWorkApplyList();
            self.allowInfinite = true;
              }, 1000);
        },
        reInit:function(){
            var self = this;
            self.pageIndex = 0;
            if (app.view.current.router.url.indexOf('/workApply/') > -1) {//防止子页面返回触发。有类似的需求可以往这个里面添加
              $(".page-content").scrollTop(0, 300);
            }
            $("#workApply_dataList").empty();
            if(!self.allowInfinite){
                self.allowInfinite = true;
                $('#dataList_preloader').show();
            }
        },
        refreshMaintainList: function (e, done) {
            if (done && e) {
                var self = this;
                var $ = self.$$;
                setTimeout(function () {
                    self.reInit();
                    $('#dataList_preloader').hide();
                    self.getWorkApplyList();
                    done();
                }, 1000);
            }
        },
        getWorkApplyType:function(){
        	var self = this;
        	//类型
            Dao.getDict({
               code:94,
            },function(data) {
               if (data.dictValueObj&&data.dictValueObj.length>0){
            	   var dictValueArr = data.dictValueObj;
                   var arr = [];
                   for (var i = 0;i < dictValueArr.length > 0;i++){
                        var obj = {};
                        obj.id= dictValueArr[i].dictKey;
                        obj.name= dictValueArr[i].dictValue;
                        arr.push(obj);
                    }
                     let selectOptionIndex = null;
                    //作业类型
                    jQuery("#workApply_type").click(function(e) {
                        selectOptionFn(arr,function(data){
                            if(self.categoryId == data.id){
                                $("#workApply_type").removeClass("select-active");
                                $("#workApply_type").addClass("right-select");
                                jQuery("#workApply_type").html("请选择作业类型");
                                self.workApplyFilterType = -1;
                            }else{
                                $("#workApply_type").removeClass("right-select");
                                $("#workApply_type").addClass("select-active");
                                jQuery("#workApply_type").html(data.name);
                                self.workApplyFilterType = data.id;
                            }
                            if(selectOptionIndex != data.index){
                                selectOptionIndex = data.index;
                            }else{
                                selectOptionIndex = "";
                            }
                            
                            self.pageIndex = 0;
                            self.reInit();
                            self.getWorkApplyList();
                        },selectOptionIndex);
                    });
               }
            });
        },
        workApplyBtn:function(){
        	app.router.navigate("/workApplyCreate/0/0/");
        },
        //创建作业申请回调刷新列表
        backRefreshWorkApply:function(){
        	var self = this;
        	self.reInit();
            self.getWorkApplyList();
        },
    },
    on: {
        pageInit: function(e, page) {
            var self = this;
            var $ = self.$;
            self.pageIndex = 0;
            self.reInit();
            //区分联网单位
            self.isMuilUnitUser();
            //重现筛选条件
            if(localStorage.getItem("ilink_select_option")){
                var selectHistory = JSON.parse(localStorage.getItem("ilink_select_option"));
                if(selectHistory.page == "workApply"){
                    self.currentOrgId = selectHistory.organizationIds;
                    jQuery("#select_org").html(selectHistory.orgName).addClass('select-active');
                }
            }
            //列表
            self.getWorkApplyList();
            self.getWorkApplyType();
        },
        pageBeforeOut: function(e, page) {
            var self = this;
            if(self.currentOrgId != userInfor.organizationIds){
                let params = {
                    page:'workApply',
                    organizationIds:self.currentOrgId,
                    orgName:jQuery("#select_org").html(),
                }
                saveSelectOption(params);
            }
        }
    }
}
</script>